<template>
  <div class="index-wrap">
    <div style="width: 90%; margin-left: 5%">
      <!--      <card />-->
      <!--      <span class="right-title">前端</span>-->
      <div class="filter-container" style="margin-bottom: 15px; margin-top: 15px">
        <!--        <el-select v-model="listQuery.terminalType" placeholder="设备类型" clearable style="width: 130px; margin-right: 7px" class="filter-item" @change="handleFilter">-->
        <!--          <el-option v-for="item in terminalTypeOptions" :key="item" :label="item" :value="item" />-->
        <!--        </el-select>-->
        <!--      <el-select v-model="listQuery.terminalType" placeholder="设备类型" clearable class="filter-item" style="width: 130px; margin-right: 7px">-->
        <!--        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />-->
        <!--      </el-select>-->
        <!--        <el-select v-model="listQuery.sort" style="width: 140px; margin-right: 7px" class="filter-item" @change="handleFilter">-->
        <!--          <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />-->
        <!--        </el-select>-->
        <el-date-picker
          v-model="formData.start"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'00:00:00'"
        />
        -
        <el-date-picker
          v-model="formData.end"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'23:59:59'"
        />
        <el-input v-model="formData.title" placeholder="宣传标题" style="width: 100px; margin-left: 7px; margin-right: 7px" @keyup.enter.native="handleFilter" />
        <el-input v-model="formData.author" placeholder="宣传发布者" style="width: 150px; margin-right: 7px" @keyup.enter.native="handleFilter" />
        <el-button style="margin-left: 10px" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
        <!--        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">-->
        <!--          展示详情-->
        <!--        </el-checkbox>-->
      </div>
      <div class="filter-container" style="margin-bottom: 15px; margin-top: 15px">
        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
          发布宣传
        </el-button>
        <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handleMutiDelete">
          删除宣传
        </el-button>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="filterContent"
        element-loading-text="拼命加载中"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" min-width="5%" />
        <el-table-column align="center" label="宣传Id" min-width="10%">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column label="宣传内容" min-width="60%">
          <template slot-scope="scope">
            <div @click="showDetail(scope.row,scope.$index)">
              <contentText :title="scope.row.title" :text="scope.row.text" :num="scope.row.num" :author="scope.row.author" :time="scope.row.time" :top="scope.row.top" section="警务宣传" />
            </div>
            <!--            <div v-if="scope.row.top" style="float: left; width: 5%">-->
            <!--              <img width="35px" src="@/assets/icon/top.png">-->
            <!--            </div>-->
          </template>
        </el-table-column>
        <el-table-column label="操作宣传" align="center" min-width="25%">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row,scope.$index)">
              编辑
            </el-button>
            <el-button v-if="!scope.row.top" size="mini" type="success" @click="postTop(scope.row)">
              置顶
            </el-button>
            <el-button v-if="scope.row.top" size="mini" @click="cancelTop(scope.row)">
              取消置顶
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row,scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
        <!--        <el-table-column label="Author" width="110" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-tag>{{ scope.row.author }}</el-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Readings" width="115" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.pageviews }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column align="center" label="PDate" width="220">-->
        <!--          <template slot-scope="scope">-->
        <!--            <i class="el-icon-time" />-->
        <!--            <span>{{ scope.row.display_time }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <!--      <div v-for="item in contentList" :key="item.id">-->
      <!--        <contentText :title="item.title" :text="item.text" :num="item.num" :author="item.author" :time="item.time"/>-->
      <!--      </div>-->
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
      <table id="table" style="width: 90%; border-spacing: 20px">
        <tr>
          <td align="right">宣传标题:</td>
          <td><el-input v-model="chooseContent.title" placeholder="请输入内容" /></td>
        </tr>
        <!--        <tr>-->
        <!--          <td align="right">发布日期:</td>-->
        <!--          <td>-->
        <!--            <el-date-picker-->
        <!--              v-model="chooseContent.time"-->
        <!--              type="datetime"-->
        <!--              placeholder="选择日期时间"-->
        <!--              default-time="12:00:00"-->
        <!--            />-->
        <!--          </td>-->
        <!--        </tr>-->
        <tr>
          <td style="vertical-align: top; text-align: right">宣传内容:</td>
          <td>
            <tinymce v-if="dialogFormVisible" v-model="chooseContent.text" />
          </td>
        </tr>
        <tr>
          <td align="right">发布者:</td>
          <td><el-input v-model="chooseContent.author" placeholder="请输入内容" /></td>
        </tr>
        <tr>
          <td align="right"><span>是否置顶:</span></td>
          <td>
            <el-radio v-model="chooseContent.top" :label="true" border size="medium">是</el-radio>
            <el-radio v-model="chooseContent.top" :label="false" border size="medium">否</el-radio>
          </td>
        </tr>
        <!--        <tr>-->
        <!--          <td />-->
        <!--          <td><el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">提交</el-button></td>-->
        <!--        </tr>-->
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="loadDraft">
          载入草稿
        </el-button>
        <el-button type="success" style="margin-right: 40px" @click="saveDraft">
          保存草稿
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="警务详情" :visible.sync="dialogContentVisible" width="70%">
      <div class="context-title">
        {{ chooseContent.title }}
      </div>
      <div class="box"><span class="time">发表时间：{{ chooseContent.time }}</span><br></div>
      <div class="context-container">
        <div class="context">
          <p style="text-align: center">{{ chooseContent.section }}</p>
          <br>
          <p style="text-align: justify" v-html="chooseContent.text" />
          <br>
        </div>
        <div class="bj">警务发布者：{{ chooseContent.author }}</div>
        <br style="clear: both">
      </div>
    </el-dialog>
    <!--    <div class="index-right">-->
    <!--      <slide-show :slides="slides" :inv="3000" />-->
    <!--      <div class="index-board-list">-->
    <!--        <div-->
    <!--          v-for="(item,index) in boardList"-->
    <!--          :key="item.id"-->
    <!--          class="index-board-item"-->
    <!--          :class="[{'line-last':index % 2 !==0},'index-board-'+item.id]"-->
    <!--        >-->
    <!--          <div class="index-board-item-inner">-->
    <!--            <h2>{{ item.title }}</h2>-->
    <!--            <p>{{ item.description }}</p>-->
    <!--            <div class="index-board-button">-->
    <!--              <a href="detail/analysis" class="button">立即购买</a>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="index-content" />-->
    <!--    </div>-->
  </div>
</template>

<script>
// import slideShow from '@/components/slideShow'
import contentText from '../../components/notice/contentText'

import tinymce from '@/components/Tinymce'

export default {
  name: 'PoliceNotice',
  components: {
    contentText,
    tinymce
  },

  data() {
    return {
      formData: {
        start: '',
        end: '',
        title: '',
        author: ''
      },
      chooseSection: '最新公告',
      newSection: '',
      multipleSelection: [],
      dialogContentVisible: false,
      dialogFormVisible: false,
      dialogSectionVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑公告',
        create: '发布公告'
      },
      listLoading: false,
      draftContent: {
        title: '',
        text: '',
        href: '',
        num: '',
        author: '',
        time: '',
        top: true
      },
      chooseContent: {
        title: '',
        text: '',
        href: '',
        num: '',
        author: '',
        time: '',
        top: true
      },
      chooseIndex: -1,
      filterContent: [],
      contentList: [
        {
          title: '创新工作思路，提升工作效能',
          text: '渝水区巡逻防暴大队在行动 为进一步提升社会治安防控管理能力，震慑违法犯罪，提高人 民群众安全感，渝水区巡逻防暴大队不断创新工作思路,优化工作方 法，统筹兼顾，多措并举，扎实推进巡防工作，以强化队伍素质，提 高工作水平，提升工作效能为核心,着力建设一只富有战斗力的新型 巡逻警察队伍，在巡逻防范及打击整治违法犯罪中取得了显著战果。',
          href: 'https://segmentfault.com/a/1190000019287040',
          num: '34',
          author: '社区警务宣传中心',
          time: '1天前',
          top: true
        },
        {
          title: '工作简报',
          text: '为打造平安校园建设，加强警校共建，增强辖区幼儿园的防火减灾意识，提升中小学生法律知识和法制观念和自我安全保护意识。近日，XX派出所所长A丕军带领民警先后深入XX幼儿园、XX初中给全校师生上了一堂以“防火、重安全”为主题的法制宣传课。\n' +
            '\n' +
            '“发生火灾拨打什么号码？”“拨打110是干嘛的？”在街上与大人走散了怎么办”、“路上有陌生人跟着你怎么办”、及 “怎样拨打报警电话” 民警通过这些通俗易懂的提问与小朋友互动，在轻松愉悦的气氛中与小朋友们架起了沟通桥梁，自然而然地向他们灌输着安全知识。针对幼儿园的特殊性和实际情况，派出所民警不但为老师们讲解了日常工作中应当注意的消防常识，发生火灾后的疏散逃生方法，初期火灾的扑救方法，发生火灾后的报警方法等，还仔细检查了灭火器的生产日期，并现场演示灭火器的使用方法。最后，幼儿园园长XX向我们的民警表示：将进一步确保园内安全长效工作机制落到实处，全力维护校园安全稳定，最大限度地预防和减少各类事故及火灾的发生。\n' +
            '\n' +
            '随后，所长A丕军来到XX初中，为全校师生上了一堂精彩的法制宣传课。课上，A所长首先结合青少年心理特征、生活实际和接受能力，以真实案例为教材，从家庭、学校、社会三个方面，深入浅出地分析讲解了当前犯罪行为的各种诱因，有针对性地讲解了相关法律法规和安全防范知识。',
          href: 'https://segmentfault.com/a/1190000019283751',
          num: '21',
          author: '社区警务宣传中心2',
          time: '13小时前',
          top: true
        },
        {
          title: '做好社区警务工作的意义',
          text: '加强社区工作的重大意义 随着我国改革开放的不断深入和扩大，城市的政治、经济、文化和社会各方面都在发生深刻的变化。\n' +
            '\n' +
            '在这个变革中，城市人口大量集聚，人与人之间的关系日趋多样化和复杂化，以地域为特征的社区在短时期内大量兴起，社会的结构和人们的生活方式也发生了急剧变化。 在城市社区中，如何体现党在居民意识形态上的领导地位，如何落实“三个代表”，如何为广大人民群众服务，保持党同人民群众的血肉联系，如何把党的路线、方针、政策落到实处，如何加强政府对社区的管理和服务，把基层和基础打牢，这是需要我们研究的新的重大课题。\n' +
            '\n' +
            '下面，我结合罗湖的实际，就如何加强基层基础建设，搞好社区工作，谈一谈个人的思考。 城市社区工作是在党的领导下，依靠社区力量，利用社区资源，强化社区功能，解决社区问题，促进社区政治、经济、文化、环境协调和健康发展，不断提高社区成员生活水平和生活质量的过程。\n' +
            '\n' +
            '社区工作是一项内容广泛的社会系统工程，其实质是对我们传统的管理体制的改革，是在改革中的制度变革和创新。其重要意义在于： 1、加强社区工作是加强基层基础工作的需要 “基础不牢，地动山摇”。',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false
        },
        {
          title: '做好警务工作的意义2',
          text: '没有一个稳固的社会基础，就不可能落实好上级党委的路线、方针和政策，不可能完成好上级政府交给的各项工作任务，不可能开创出一个好的工作局面，不可能在维护社会安全稳定、提高居民生活质量、加强城市建设管理、密切党群干群关系上做出富有成效的工作。 困此，基层基础工作很重要，一定要切实抓紧抓好。\n' +
            '\n' +
            '而社区工作正是最基层、最基础的工作，要打牢基础，就必须加强社区工作。 2、加强社区工作是从计划经济转向社会主义市场经济的迫切需要 在计划经济体制下，我们的政府是“全能全权政府”，包揽着社会成员的就业、住房、医疗、福利、娱乐等所有社会事务，而社会上所有的人都是依附于政府的，他们都在由政府控制的单位中工作和生活，即是“单位人”。\n' +
            '\n' +
            '但市场经济的逐步建立，改变着政府传统管理的微观基础，推动着政企分开，促进着劳动、工资、住房、医疗、养老福利等一系列制度的改革。人们逐步脱离了单位，成为社会人，有些还成为自由职业者，从单位制转向社会制。\n' +
            '\n' +
            '就我们罗湖区来讲，辖区有近70万人口，但属于我们机关和区属企事业单位的人口才1万多人，中央、省、市驻罗湖的直属企事业单位人口也是少数，绝大多数的人口是社会上从事各种职业的人员，这是市场经济比较成熟的一个标志。 如何加强对这些人口的管理，以及为这些人口提供服务，我们主要是依靠基层的办事处和居委会，通过以地域为特征的社区管理与服务，与这些人发生联系，把社区分散孤立的个人粘合起来。\n' +
            '\n' +
            '但是，由于我们传统体制上的缺陷，这种联系还是很脆弱的。因此，要对传统的管理体制进行改造，由单位制转向社会制，建设发达的社区管理系统。',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false
        },
        {
          title: '加强社区工作是适应经济体制改革的需要',
          text: '它可以有效地解决社会管理职能分工的问题 改革越深入，企事业单位期望社会承担起社会职能的呼声就越高，由政府和社会来履行社会职能是经济体制改革和社会现代化进程的必然趋势，在进行经济体制改革的同时，必须相应地进行社会职能、社会管理体制的改革，解决社会职能、政府职能与企业职能之间的定性和定位，社会职能最基本的载体除了政府以外，更应当是各种类型的社会共同体。 必须理顺社会、政府与企业之间的职能关系，逐步建立起和谐发展的社会管理模式和运行机制。\n' +
            '\n' +
            '而加强社区工作，正是解决社会管理职能的分工，建立这样一种模式和机制的有效载体。 4、加强社区工作是发展社会主义民主政治，充分体现党的领导和贯彻落实“三个代表”重要思想的有效途径 改革开放以来，我国经济体制由计划经济向社会主义市场经济转变，推动了社会主义民主的进一步发展，它要求社会主义民主的形式与社会主义市场经济体制相适应。\n' +
            '\n' +
            '加强社区工作，正是扩大基层民主，保证人民群众直接行使民主权利的有效途径。社区工作的加强，充分体现了以人为本，互助互利，奉献爱心，民主自治，对保持社会的稳定极其重要。\n' +
            '\n' +
            '党对人民群众的关心、爱护和实施领导，党和政府的各项路线、方针、政策在基层的贯彻执行，社区是一个很重要的途径。 作为基层党委和政府，要贯彻“三个代表”，实施“三个代表”，就是要面向基层，面向老百姓，密切党群干群关系，坚持走群众路线。\n' +
            '\n' +
            '而我们社区这一块，是最基层、最基础的，覆盖面最广，涉及到社会生活的方方面面，只有把社区工作做好了，才能真正体现“三个代表”。 与此同时，我们还要把党的领导、人民代表大会的国家权力制度、充分体现在基层的政治生活中，通过充分发扬民主，相信和依靠群众自我组织、自我管理、自我解决问题，来谋求社区的真正发展',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false
        },
        {
          title: '加强社区工作是贯彻“三个代表”重要思想',
          text: '提高市民生活质量的需要 随着经济的发展和城市现代化水平的提高，广大人民群众对生活的质量和水准的要求越来越高，社会需求呈现出从追求物质享受向更多的追求精神生活的提升，广大市场对环境、安全、康乐、文化、卫生、教育、艺术等的。',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false
        }
      ]
    }
  },
  created: function() {
    this.filterContent = this.contentList
    // this.$http.get('api/newsList')
    //   .then((res) => {
    //     this.newsList = res.data
    //   }, (err) => {
    //     console.log(err)
    //   })
  },
  methods: {
    saveDraft() {
      this.draftContent = Object.assign({}, this.chooseContent) // copy obj
    },
    loadDraft() {
      this.chooseContent = Object.assign({}, this.draftContent) // copy obj
    },
    postTop(row) {
      row.top = true
    },
    cancelTop(row) {
      row.top = false
    },
    addSection() {
      this.productList.pc.list.push({
        src: require('@/assets/icon/newOther.png'),
        name: this.newSection
      })
      this.dialogSectionVisible = false
      this.$notify({
        title: 'Success',
        message: '增加成功',
        type: 'success',
        duration: 2000
      })
    },
    changeSection(sec) {
      if (sec === '最新公告') {
        this.filterContent = this.contentList
        this.chooseSection = sec
        return
      }
      this.chooseSection = sec
      this.filterContent = this.contentList.filter(item => {
        return item.section === sec
      })
    },
    showDetail(row, index) {
      this.chooseContent = Object.assign({}, row) // copy obj
      this.chooseIndex = index
      // this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogContentVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      console.log(this.contentList[index])
      this.contentList.splice(index, 1)
    },
    handleUpdate(row, index) {
      this.chooseContent = Object.assign({}, row) // copy obj
      console.log(this.chooseContent)
      this.chooseIndex = index
      // this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    updateData() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.chooseContent.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      this.contentList.splice(this.chooseIndex, 1, this.chooseContent)
      this.dialogFormVisible = false
      this.$notify({
        title: 'Success',
        message: 'Update Successfully',
        type: 'success',
        duration: 2000
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     const tempData = Object.assign({}, this.temp)
      //     tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
      //     updateArticle(tempData).then(() => {
      //       const index = this.list.findIndex(v => v.id === this.temp.id)
      //       this.list.splice(index, 1, this.temp)
      //       this.dialogFormVisible = false
      //       this.$notify({
      //         title: 'Success',
      //         message: 'Update Successfully',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }
      // })
    },
    createData() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.chooseContent.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      this.contentList.unshift(this.chooseContent)
      this.dialogFormVisible = false
      this.$notify({
        title: 'Success',
        message: 'Created Successfully',
        type: 'success',
        duration: 2000
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
      //     this.temp.author = 'vue-element-admin'
      //     createArticle(this.temp).then(() => {
      //       this.list.unshift(this.temp)
      //       this.dialogFormVisible = false
      //       this.$notify({
      //         title: 'Success',
      //         message: 'Created Successfully',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }
      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleMutiDelete() {
      if (this.multipleSelection.length) {
        this.multipleSelection.forEach(element => {
          const index = this.contentList.findIndex(item => item === element)
          this.contentList.splice(index, 1)
        })
        this.$notify({
          title: 'Success',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      } else {
        this.$message({
          message: '请选择至少一个选项',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
  .active {
    font-weight: bold;
  }
  .index-wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .index-left {
    float: left;
    width: 240px;
    text-align: left;
  }
  .index-right {
    float: left;
    width: 78%;
    margin-bottom: 10px;
  }
  .index-left-block {
    margin: 15px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
  }
  .index-left-block .hr {
    margin-bottom: 20px;
  }
  .index-left-block h2 {
    background: #6d9eeb;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: bold;
  }
  .index-left-block h3 {
    font-size: 14px;
    padding: 0 15px 5px 15px;
    color: #212121;
  }
  .index-left-block ul {
    padding: 0 15px;
    text-shadow: 0 0 black;
    background-color: white;
    line-height: 30px;
    color: #757575;
    padding-left: 30p;
    font-size: 14px;
    list-style-type: none;
  }
  .h3-line{
    color: #d4d4d4;
  }
  .index-left-block li {
    padding: 7px;
    border-radius: 10px;
  }
  .index-left-block li:hover {
    background-color: #d8ecff;
  }
  .left-img{
    display:inline-block;
    vertical-align: middle;
  }
  .left-a{
    display: inline-block;
    margin-left: 10px;
  }
  .index-board-list {
    overflow: hidden;
  }
  .index-board-item {
    float: left;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .index-board-item-inner {
    min-height: 200px;
    padding-left: 180px;
    position: relative;
  }
  /*.index-board-car .index-board-item-inner{*/
  /*  background: url(~@/assets/images/1.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-loud .index-board-item-inner{*/
  /*  background: url(~@/assets/images/2.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-earth .index-board-item-inner{*/
  /*  background: url(~@/assets/images/3.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-hill .index-board-item-inner{*/
  /*  background: url(~@/assets/images/4.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  .index-board-item h2 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
  }
  .index-board-item p{
    font-size: 12px;
    width: 200px;
    line-height: 20px;
  }

  .line-last {
    margin-right: 0;
  }
  .index-board-button {
    position: absolute;
    bottom: 0px;
  }
  .lastest-news {
    min-height: 512px;
  }
  .hot-tag {
    background: red;
    color: #fff;
  }
  .new-item {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right-content{
    width:100%;
    float: left;
    margin-top: 20px;
  }
  .right-title{
    display: inline-block;
    width:100%;
    margin-top: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }
  /deep/ .elbut {
    width: 160px;
    background: #6d9eeb;
  }
  .context-title {
    font-size: 24px;
    color: #444444;
    text-align: center;
    font-weight: bold;
    line-height: 38px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
  .time {
    color: #999;
    font-size: 14px;
    float: left;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
  }
  .context {
    color: #444444;
    font-size: 16px;
    line-height: 32px;
  }
  .context p {
    text-indent: 2em;
    display: block;
    /* margin-block-start: 1em; */
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0 0;
    padding: 0 0;
  }
  .bj {
    float: right;
    margin-top: 75px;
    color: #777777;
  }
  .context-container {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 0 0 20px;
  }
</style>
